<template>
  <div style="margin-top: -20px">
    <el-row :gutter="20" class="home">
      <!-- 将用户信息和昨日总结放在同一个列下 -->
      <el-col :span="8" style="margin-top: 20px">
        <!-- 用户信息卡片 -->
        <el-card
          shadow="hover"
          style="
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
              0 -4px 8px rgba(0, 0, 0, 0.1);
          "
        >
          <div class="user">
            <img :src="getImageUrl('user')" class="user" />
            <div class="user-info">
              <p class="user-info-admin">admin</p>
              <p class="user-info-p">超级管理员</p>
            </div>
          </div>
          <template #footer class="login-info">
            <p>上次登录时间：<span>2025-1-15</span></p>
            <p>上次登录地点：<span>衡阳</span></p>
          </template>
        </el-card>
      </el-col>

      <!-- 其它列 -->
      <el-col :span="16">
        <el-row :gutter="20">
          <el-col v-for="(stat, index) in statisticData" :key="index" :span="8">
            <StatisticCard
              class="statistic"
              :title="stat.title"
              :value="stat.value"
              :description="stat.description"
            />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <LineCard class="lineCard" />
  </div>
</template>

<script setup>
import StatisticCard from '../components/StatisticCard.vue';
import LineCard from '../components/LineCard.vue';
import activeMap from '../components/volunteerData/activeMap.vue';
const getImageUrl = (user) => {
  return new URL(`../assets/images/${user}.png`, import.meta.url).href;
};
import { useRouter } from 'vue-router';
const router = useRouter();

import HomePage from '../apis/HomePage';

import { onMounted, ref } from 'vue';
const statisticData = ref([]);
async function fetchData() {
  try {
    const data = await HomePage.getHomePage();
    const parseData = JSON.parse(data);
    statisticData.value = [
      {
        title: '注册志愿者',
        value: parseData.registerVolunteer,
        description: '今日志愿者数量',
      },
      {
        title: '待审核的任务',
        value: parseData.inspectingTask,
        description: '今日待审核的任务数量',
      },
      {
        title: '已发布任务',
        value: parseData.acceptingTask,
        description: '当前任务广场上待接受的任务',
      },
    ];
  } catch (error) {
    alert('Error fetching home page data:', error);
  }
}
//在组件挂载时获取
onMounted(() => {
  fetchData();
});
</script>

<style scoped lang="less">
.statistic {
  margin-top: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 -4px 8px rgba(0, 0, 0, 0.1);
}
.lineCard {
  margin-top: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 -4px 8px rgba(0, 0, 0, 0.1);
}
.home {
  height: 20%;
  overflow: hidden;
  .user {
    display: flex;
    align-items: center;

    img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      margin-right: 40px;
    }
    .user-info {
      p {
        line-height: 40px;
      }
      .user-info-p {
        color: #666;
      }
      .user-info-admin {
        font-size: 35px;
      }
    }
  }
}
</style>
